<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css"/>
		<style type="text/css">
			.myFloat {
				overflow: hidden;
			}
			.myFloat span {
				float: left;
			}
			.myFloat i, .myFloat .mui-numbox {
				float: right;
				color: #ACACB4;
			}
			#history {
				float: right;
				color: #8cb33e;
			}
		</style>
	</head>

	<body>
		<header class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="mui-center mui-title" style="color: #8cb33e;">
				图文问诊设置
            </h1>
            <a id="history" type="button" class="mui-btn-link mui-btn-nav mui-pull-right">
                历史
            </a>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span></span>
					<div class="mui-switch mui-switch-blue mui-active">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ui>
			<ul class="mui-table-view myFloat">
			    <!--<li id='start' data-options='{}' class="mui-table-view-cell">
			        <span class="mui-navigate-right">开始时间</span>
			        <i>
			        	点击选择开始时间
			        </i>
			    </li>
			    <li id='myEnd' data-options='{}' class="mui-table-view-cell">
			        <span class="mui-navigate-right">结束时间</span>
			        <i>
			        	点击选择结束时间
			        </i>
			    </li>-->
			    <li class="mui-table-view-cell">
			    	<span class="mui-navigate-right" style="margin-top: 8px;">设置金额</span>
					<div class="mui-numbox" data-numbox-step='1'>
					  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
					  <input class="mui-numbox-input" type="number" />
					  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
					</div>
				</li>
			</ul>
			<div id="sendMsg" class="mui-table-view-cell mui-action-back" style="text-align: center;margin-top: 10px;background-color: #007AFF; color: #fff;">
				<a>确定</a>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script type="text/javascript">
            document.getElementById("sendMsg").addEventListener("tap", function() {
                //打开关于页面
                mui.toast('申请提交成功');
            });
            document.getElementById("history").addEventListener("tap", function() {
                    mui.openWindow({
                    url:'photoDocHistory.html',
                    id:'photoDocHistory.html',
                    extras:{
                    }
                })
            });
			mui('.mui-content .mui-switch').each(function() { //循环所有toggle
				//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
				this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? '已开启' : '已关闭');
				/**
				 * toggle 事件监听
				 */
				this.addEventListener('toggle', function(event) {
					//event.detail.isActive 可直接获取当前状态
					this.parentNode.querySelector('span').innerText = '状态：' + (event.detail.isActive ? '已开启' : '已关闭');
				});
			});
		</script>
		<script type="text/javascript">
			(function($) {
				$.init();
				var result = $('#start i')[0];
				var resultEnd = $('#myEnd i')[0];
				var btnsStart = $('#start');
				var btnsEnd = $('#myEnd');
				btnsStart.each(function(i, btn) {
						btn.addEventListener('tap', function() {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							var picker = new $.DtPicker(options);
							picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								result.innerText = rs.text;
								/*
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								picker.dispose();
							});
						}, false);
					});
				btnsEnd.each(function(i, btn) {
						btn.addEventListener('tap', function() {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							var picker = new $.DtPicker(options);
							picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								resultEnd.innerText = rs.text;
								/*
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								picker.dispose();
							});
						}, false);
					});
				})(mui);
		</script>
	</body>

</html>